<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="${APP_PATH}/js/jquery-1.11.1.min.js"></script>
<script src="${APP_PATH}/js/echarts.js"></script>
<script type="text/javascript" src="${APP_PATH}/theme/blue.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
	getChartData();
})
	 function getChartData() {
		//通过Ajax获取数据  
		$.ajax({
			type : "post",
			//async : false, //同步执行  
			url : "${APP_PATH}/orderManagement/OrderQuery/getBarData",
			data : {},
			dataType : "json", //返回数据形式为json  
			success : function(result) {
				console.log(result);
				if (result) {
					//options.legend.data = result.legend;  
					option.legend.data = result.legend;
					option.xAxis[0].data = result.category;
					//options.series[0].data = result.series[0].data;
					option.series[0].data = result.series[0].data;
					option.series[1].data = result.series[1].data;
					//console.log(result);
					//console.log(option.series[0].data);
					myChart.hideLoading();
					myChart.setOption(option);
				}
			},
			error : function(errorMsg) {
				alert("不好意思，图表请求数据失败啦!");
				myChart.hideLoading();
			}
		});
	 }
</script>
<body id="tablePage">
<div>
		<blockquote>
			<p class="twoType">角色管理</p>
		</blockquote>
		<hr/>
		<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="mainBar"
		style="height:500px;border:1px solid #ccc;padding:10px;"></div>
	 
</div>
<script type="text/javascript">
		var dom = document.getElementById("mainBar");
		//alert(dom);
	    var myChart = echarts.init(dom);

		//定义图表option  
		var option = {
			//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题  
			title : {
				//主标题文本，'\n'指定换行  
				text : '2019年销售与计划统计报表',
				//主标题文本超链接  
				link : '',
				//副标题文本，'\n'指定换行  
				subtext : 'www.stepday.com',
				//副标题文本超链接  
				sublink : 'http://www.stepday.com/myblog/?Echarts',
				//水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  
				x : 'left',
				//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  
				y : 'top'
			},
			//提示框，鼠标悬浮交互时的信息提示  
			tooltip : {
				//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'  
				trigger : 'axis'
			},
			//图例，每个图表最多仅有一个图例  
			legend : {
				//显示策略，可选为：true（显示） | false（隐藏），默认值为true  
				show : true,
				//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  
				x : 'center',
				//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  
				y : 'top',
				//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应  
				//data: ['蒸发量','降水量'] 
				data : [ '计划金额', '销售金额' ]
			},
			//工具箱，每个图表最多仅有一个工具箱  
			toolbox : {
				//显示策略，可选为：true（显示） | false（隐藏），默认值为false  
				show : true,
				//启用功能，目前支持feature，工具箱自定义功能回调处理  
				feature : {
					//辅助线标志  
					mark : {
						show : true
					},
					//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退  
					dataZoom : {
						show : true,
						title : {
							dataZoom : '区域缩放',
							dataZoomReset : '区域缩放后退'
						}
					},
					//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能  
					dataView : {
						show : true,
						readOnly : true
					},
					//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换  
					magicType : {
						show : true,
						type : [ 'line', 'bar' ]
					},
					//restore，还原，复位原始图表  
					restore : {
						show : true
					},
					//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'  
					saveAsImage : {
						show : true
					}
				}
			},
			//是否启用拖拽重计算特性，默认关闭(即值为false)  
			calculable : true,
			//直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值  
			//横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型  
			xAxis : [ {
				//显示策略，可选为：true（显示） | false（隐藏），默认值为true  
				show : true,
				//坐标轴类型，横轴默认为类目型'category'  
				type : 'category',
				//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行  
				//data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] 
				//data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
                 data:[]
			} ],
			//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值  
			//纵轴通常为数值型，但条形图时则纵轴为类目型  
			yAxis : [ {
				//显示策略，可选为：true（显示） | false（隐藏），默认值为true  
				show : true,
				//坐标轴类型，纵轴默认为数值型'value'  
				type : 'value',
				//分隔区域，默认不显示  
				splitArea : {
					show : true
				}
			} ],

			//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象  
			series : [ {
				//系列名称，如果启用legend，该值将被legend.data索引相关  
				name : '最低温度',
				//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。  
				type : 'bar',
				//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值  
				data : [/* 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 */],
				//系列中的数据标注内容  
				markPoint : {
					data : [ {
						type : 'max',
						name : '最大值'
					}, {
						type : 'min',
						name : '最小值'
					} ]
				},
				//系列中的数据标线内容  
				markLine : {
					data : [ {
						type : 'average',
						name : '平均值'
					} ]
				}
			},
			 {
				//系列名称，如果启用legend，该值将被legend.data索引相关  
				name : '最高温度',
				//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。  
				type : 'bar',
				//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值  
				data : [/* 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 */],
				//系列中的数据标注内容  
				markPoint : {
					data : [ {
						type : 'max',
						name : '最大值'
					}, {
						type : 'min',
						name : '最小值'
					} ]
				},
				//系列中的数据标线内容  
				markLine : {
					data : [ {
						type : 'average',
						name : '平均值'
					} ]
				}
			}

			]
		};
		//为echarts对象加载数据              
		myChart.setOption(option);
		myChart.hideLoading();
		/* alert("###"); */
		getChartData();  //aja后台交互    
	
</script>
</body>
</html>